<template>
    <div class="app-container">
        <!-- 搜索栏 -->
        <el-form :model="queryParams" :inline="true" v-show="showSearch">
            <el-form-item label="异常模块">
                <el-input @keyup.enter="handleQuery" v-model="queryParams.optModule" style="width: 200px"
                    placeholder="请输入异常模块" clearable />
            </el-form-item>
            <el-form-item label="操作描述">
                <el-input @keyup.enter="handleQuery" v-model="queryParams.keyword" style="width: 200px"
                    placeholder="请输入操作描述" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary"  class="el-icon-search"  @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 操作按钮 -->
        <el-row :gutter="10" class="mb15">
            <el-col :span="1.5">
                <el-button type="danger" plain :disabled="logIdList.length === 0" icon="Delete"
                    @click="handleDelete(undefined)">批量删除</el-button>
            </el-col>
            <RightToolBar @changeShow="changeShowSearch" :showSearch="showSearch" @queryTable="getList"></RightToolBar>
        </el-row>
        <!-- 表格展示 -->
        <el-table border :data="logList" @selection-change="handleSelectionChange" v-loading="loading">
            <!-- 表格列 -->
            <el-table-column type="selection" align="center" width="55"></el-table-column>
            <!-- 异常模块 -->
            <el-table-column prop="module" label="异常模块" align="center" width="100"></el-table-column>
            <!-- 操作描述 -->
            <el-table-column prop="description" label="操作描述" align="center" width="160"></el-table-column>
            <!-- 请求方式 -->
            <el-table-column prop="method" label="请求方式" align="center" width="100">
                <template #default="scope">
                    <el-tag :type="tagType(scope.row.requestMethod)">
                        {{ scope.row.requestMethod }}
                    </el-tag>
                </template>
            </el-table-column>
            <!-- 操作ip -->
            <el-table-column prop="ipAddress" label="操作ip" align="center" width="150"></el-table-column>
            <!-- 操作地点 -->
            <el-table-column prop="ipSource" label="操作地点" align="center" width="150"></el-table-column>
            <!-- 操作系统 -->
            <el-table-column prop="os" label="操作系统" align="center" width="150"></el-table-column>
            <!-- 浏览器 -->
            <el-table-column prop="browser" label="浏览器" align="center"></el-table-column>
            <!-- 操作日期 -->
            <el-table-column prop="createTime" label="操作日期" align="center" width="140">
                <template #default="scope">
                    <div class="create-time">
                        <el-icon>
                            <clock />
                        </el-icon>
                        <span style="margin-left: 10px">{{ formattedDate(scope.row.createTime) }}</span>
                    </div>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" align="center" width="250">
                <template #default="scope">
                    <el-button type="primary" class="el-icon-document" size="mini" plain @click="handleView(scope.row)">详细</el-button>
                    <el-button type="danger" class="el-icon-delete" size="mini" plain @click="handleDelete(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination v-if="count > 0" :total="count" v-model:page="queryParams.current" v-model:limit="queryParams.size"
            @pagination="getList" />
        <!-- 操作日志详细 -->
        <el-dialog title="操作日志详细" :visible.sync="open" width="70%" append-to-body>
            <el-form :model="exceptionLog" label-width="100px">
                <el-form-item label="异常名称：">
                    {{ exceptionLog.name }}
                </el-form-item>
                <el-form-item label="请求地址：">
                    {{ exceptionLog.uri }}
                </el-form-item>
                <el-form-item label="异常方法：">
                    {{ exceptionLog.errorMethod }}
                </el-form-item>
                 <v-md-editor  :value="exceptionLog.message" mode="preview"></v-md-editor>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="open = false">关 闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import {getExceptionList,deleteExceptionLog } from '@/api/log'
export default {
  data() {
    return {
      count: 0,
      open: false,
      showSearch: true,
      loading: false,
      queryParams: {
          current: 1,
          size: 10,
      },
      logIdList: [],
      logList: [],
      exceptionLog: {},
    }
  },
  methods: {
    queryTable(){},
    handleSelectionChange(selectedItems) {
     this.logIdList = selectedItems.map((item) => item.id);
    },
    getList(){
      this.loading = true;
      getExceptionList(this.queryParams).then(
        (data)=>{
          if(data.code == 200)
          {
          this.loading = false;
          this.logList = data.data.recordList;
          this.count = data.data.count;
          }
        }
      )
    },
    handleQuery(){
      this.getList();
    },
    changeShowSearch(data){
      this.showSearch = data;
    },
    changeShow(){},
    formattedDate(date) {
      return formatDate(date);
    },
    tagType(method){
      if(method == 'GET'){
        return 'success'
        }
      else if(method == 'POST'){
        return 'primary'
        }
      else if(method == 'PUT'){
        return 'warning'
        }
      else if(method == 'DELETE'){
        return 'danger'
        }
      else{
        return 'info'
        }
    },
    handleDelete(id){
         if(id != undefined)
        {
          this.logIdList = [id]
        }
      //批量删除
      if(this.logIdList.length > 0){  
        this.$confirm('是否删除选中的操作日志?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteExceptionLog(this.logIdList).then((data)=>{
            if(data.code == 200){
              this.$message({type: 'success', message: '删除成功'})
              this.getList();
            }
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'})
        });
      }
      else{
        this.$message({type: 'warning', message: '请选择需要删除的操作日志'})
      }
    },
    handleView(row){
      this.exceptionLog = row;
      this.exceptionLog.message = '```java'+ '\n' + this.exceptionLog.message + '```'; 
      this.open = true;
    }
  },
  mounted() {
    this.getList();
  },
}
</script>

<style>

</style>